import * as echarts from "echarts";
const myShape = {
  x: 0,
  y: 0,
  width: 13 //间距
};
// 绘制左侧面
const InclinedRoofBar = echarts.graphic.extendShape({
  shape: myShape,
  buildPath: function (ctx, shape) {
    // canvas，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - 17, shape.y - 10];
    const c2 = [xAxisPoint[0] - 17, xAxisPoint[1]];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  }
});
echarts.graphic.registerShape('InclinedRoofBar', InclinedRoofBar);
export default {
  options: {
    // noData: {
    //   title: [{   // 没数据才显示
    //     extStyle: {
    //       color: "gainsboro",
    //       fontSize: 20
    //     },
    //     text: "{A|}",
    //     left: "center",
    //     top: "60px",
    //     textStyle: {
    //       rich: {
    //         A: {
    //           //添加背景图片并且设置宽高，会自适应显示
    //           width: 120,
    //           height: 80,
    //           backgroundColor: {
    //             image: require("@/assets/images/shishi/c-one.png")
    //           }
    //         }
    //       }
    //     }
    //   },
    //   {
    //     text: "当前暂无数据",
    //     x: "center",
    //     top: "40px",
    //     textStyle: {
    //       fontSize: 14,
    //       fontWeight: "normal",
    //       color: "black",
    //     },
    //   },
    //   ]

    // },

    alarmData: {
      grid: {
        left: '5%',
        right: '5%',
        bottom: '1%',
        top: '17%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },

      xAxis: {
        type: 'category',
        data: [1, 2, 45, 4, 3, 4, 6],
        axisTick: {
          show: false //隐藏X轴刻度
        },
        axisLine: {
          lineStyle: {
            color: "#172C45"
          }
        },
        axisLabel: {
          show: true,
          // rotate: 30,

          textStyle: {
            color: '#6F7D8C',
            fontSize: 14,

          }
        },
      },
      yAxis: {
        type: 'value',
        name: "",

        nameTextStyle: {
          color: '#6F7D8C',
          fontSize: 11,

          left: -5,
          textStyle: {
            padding: [0, 50, 0, 0],
          },
          verticalAlign: "center",
        },
        axisLabel: {
          color: '#6F7D8C',
          textStyle: {
            fontSize: 14
          },

        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#000000',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#172C45',
            type: "dashed",
          }
        }
      },
      series: [
        {
          type: 'custom',
          name: '报警数',
          itemStyle: {
            borderColor: '#1A71FD',
            borderWidth: 0,
            color: '#1A71FD',
            normal: {
              borderWidth: 0
            }
          },
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            const xlocation = api.coord([api.value(0), 0]);
            return {
              type: 'InclinedRoofBar',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0] + 10,
                y: location[1],
                xAxisPoint: [xlocation[0] + 10, xlocation[1]]
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#1A71FD' },
                  { offset: 1, color: 'rgba(26,113,253,0.1)' }
                ]),
                // stroke: '#1A71FD'
              }
            };
          },
          data: [10, 15, 7, 8, 9, 5, 6],
        },


      ],
    },
    yearData: {
      // tooltip: {
      //   show:false,
      //   trigger: "item",
      //   textStyle: {
      //     fontSize: 20,
      //     color: "#fff",
      //   },

      // },
      polar: {},
      angleAxis: {
        interval: 1,
        type: "category",
        data: [],
        z: 10,
        axisLine: {
          show: false,
          lineStyle: {
            color: "#0B4A6B",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          show: false,
          interval: 0,
          color: "#0B4A6B",
          margin: 8,
          fontSize: 20,
        },
      },
      radiusAxis: {
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: "{value} %",
          show: false,
          padding: [0, 0, 20, 0],
          color: "#0B3E5E",
          fontSize: 20,
        },
      },
      calculable: true,
      series: [
        {
          type: "pie",
          radius: '70%',
          center: ["50%", "50%"],
          emphasis: {
            scale: false,
          },
          labelLine: {
            show: false,
            length: 30,
            length2: 55,
          },
          itemStyle: {
            normal: {
              borderWidth: 0,
              borderColor: "#132E4E",
            },
          },
          data: [
            {
              name: "",
              value: 0,
              itemStyle: {
                color: "#132E4E",
              },
              tooltip: {
                show: false,
              },
            },
          ],
        },
        {
          type: "pie",
          radius: ["50%", "70%"],
          center: ["50%", "50%"],
          roseType: "area", // 展示南丁格尔图
          zlevel: 10,
          label: {
            show: true,
            formatter: function (param) {
              return (
                "{a|" + param.name + "}" + "{s|" + " " + param.percent + "%}\n\n"
              );
            },
            padding: [0, -70],
            height: 60,
            rich: {
              a: {
                color: "#999999",
                fontSize: "15",
              },
              s: {
                color: "#00ffff",
                fontSize: "12",

              },
            },
            // position: "outside",
          },
          emphasis: {
            label: {
              show: true,
            },
            labelLine: {
              show: true,
            },
          },

          itemStyle: {
            normal: {
              borderWidth: 0,
              borderColor: "#132E4E",
            },

          },
          labelLine: {
            show: true,
            length: 20,
            length2: 60,
            color: "#46d6ff",
            lineStyle: {
              type: "dashed",
              width: 2,
            },
          },

          data: [
            {
              value: 15,
              name: "正常",
            },
            {
              value: 12,
              name: "故障",
            },
            {
              value: 16,
              name: "报废",
            },
          ],
        },
      ],
    },
    yearDevices: {
      grid: {
        left: '5%',
        right: '5%',
        bottom: '1%',
        top: '17%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },

      xAxis: {
        type: 'category',
        data: [1, 2, 45, 4, 3, 4, 6],
        axisTick: {
          show: false //隐藏X轴刻度
        },
        axisLine: {
          lineStyle: {
            color: "#172C45"
          }
        },
        axisLabel: {
          show: true,
          // rotate: 30,

          textStyle: {
            color: '#6F7D8C',
            fontSize: 14,

          }
        },
      },
      yAxis: {
        type: 'value',
        name: "",

        nameTextStyle: {
          color: '#6F7D8C',
          fontSize: 11,

          left: -5,
          textStyle: {
            padding: [0, 50, 0, 0],
          },
          verticalAlign: "center",
        },
        axisLabel: {
          color: '#6F7D8C',
          textStyle: {
            fontSize: 14
          },

        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#000000',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#172C45',
            type: "dashed",
          }
        }
      },
      series: [
        {
          type: 'custom',
          name: '设备数',
          itemStyle: {
            borderColor: '#1A71FD',
            borderWidth: 0,
            color: '#1A71FD',
            normal: {
              borderWidth: 0
            }
          },
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)]);
            const xlocation = api.coord([api.value(0), 0]);
            return {
              type: 'InclinedRoofBar',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0] + 10,
                y: location[1],
                xAxisPoint: [xlocation[0] + 10, xlocation[1]]
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#1A71FD' },
                  { offset: 1, color: 'rgba(26,113,253,0.1)' }
                ]),
                // stroke: '#1A71FD'
              }
            };
          },
          data: [10, 15, 7, 8, 9, 5, 6],
        },


      ],
    },
  }
}
